<template>
  <div class="sanstyle">
    <!--左边 B-->
    <div>
      <div class="block">
        <span class="demonstration">年</span>
        <el-date-picker v-model="value2" type="year" placeholder="选择年" @change="getYear" :disabled-date="pickerOptions">
        </el-date-picker>
      </div>
      <div class="msg">
        <p style="margin-left: .1rem;">总计监测鸟类<span style="margin-left: .1rem;">{{ Birds }}种</span></p>
        <p style="margin-right: .12rem;">总计<span style="margin-left: .1rem;">{{ sum }}只/次</span></p>
      </div>
      <div class="ssl">
        <!--标题 B-->
        <div class="sstitle" style="padding-right: .35rem;">
          <div class="twz">
            <span class="dwz">各月份发现频次</span>
            <br />
            <span class="xwz">Frequency of discovery by month</span>
          </div>
        </div>
        <!--标题 E-->

        <!--三栏布局B-->
        <div class="stjqy">
          <div class="bdbk" style="height: 20%;position: relative">
            <div style="width: calc(100% + 0.2rem);height: 100%;position: absolute;left: -0.2rem;" id="chart1">
            </div>
          </div>
          <div style="height: 40%; position: relative">
            <div class="sstitle" style="padding-right: .35rem;margin-top: .2rem;">
              <div class="twz">
                <span class="dwz">IUCN名录统计</span>
                <br />
                <span class="xwz">IUCN directory statistics</span>
              </div>
            </div>
            <div style="
                position: absolute;
                left: -0.2rem;
                height: calc(100% - 0.5rem);
                width: calc(100% + 0.4rem);
              " id="chart2"></div>
          </div>
          <div style="height: 30%; position: relative">
            <div class="sstitle" style="padding-right: .35rem;margin-top: .2rem;">
              <div class="twz">
                <span class="dwz">活动频率</span>
                <br />
                <span class="xwz">Species activity by time of day today</span>
              </div>
            </div>
            <div style="
                position: absolute;
                left: -0.2rem;
                height: calc(100% - 0.5rem);
                width: calc(100% + 0.2rem);
              " id="chart3"></div>
          </div>
        </div>
        <!--三栏布局E-->
      </div>
    </div>
    <!--左边 E-->
    <!--中间 B-->
    <div style="position: relative ; padding: 0 .16rem;height:100%;">
      <BaseMap ref='baseMap' :cut="1" :Syears="years"></BaseMap>
      <!--中间地图 B-->
      <!-- <div id="map" style="height: 75%; width: 100%; margin-top: 15%"></div> -->
      <!--中间地图 E-->
    </div>
    <!--中间 E-->
    <!--右边 B-->
    <div>
      <div class="ssls" style="height: 100%">
        <!--标题 B-->
        <div class="sstitles">
          <div class="twzs">
            <span class="dwz">发现频次最多top10</span>
            <br />
            <span class="xwz">Top10 most frequently found</span>
          </div>

        </div>
        <!--标题 E-->
        <div class="stjqy">
          <div class="bdbk rzs" style="height: 55%;position: relative">
            <div style="
                position: absolute;
                left: -0.2rem;
                height: calc(100% - 0.2rem);
                width: calc(100% + 0.4rem);
              " id="chart4"></div>
          </div>
          <div style="height: 40%; position: relative;margin-top: .16rem;">
            <div class="sstitles">
              <div class="twzs">
                <span class="dwz">重点鸟类迁徙规律</span>
                <br />
                <span class="xwz">Migration rules of key species</span>
              </div>
            </div>
            <div style="
                position: absolute;
                left: -0.2rem;
                height: calc(100% - 0.2rem);
                width: calc(100% + 0.2rem);
              ">
              <table class="table1" style="width:95% ;margin-left: .2rem">
                <thead>
                  <tr>
                    <th>名称</th>
                    <th>始见日</th>
                    <th>终见日</th>
                    <th>高峰期</th>
                  </tr>
                </thead>
              </table>
              <div class="over_box">
                <table style="width:100% ;text-align: center;">
                  <tbody v-for="(item, index) in tableData" :key="index" >
                    <tr>
                      <td class="td1">
                        <div class="td_div">
                          {{ item.speciesName }}
                        </div>
                      </td>
                      <td>{{ item.startDay }}</td>
                      <td>{{ item.endDay }}</td>
                      <td>{{ item.maxDay }}</td>
                    </tr>
                  </tbody>
                </table>
                <div style="height: .2rem;"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--右边 E-->
  </div>
</template>

<script>
import * as echarts from "echarts";
import http from "../utils/http";
import api from "../utils/api";
import BaseMap from '../components/common/Map.vue'
export default {
  name: "xxjc",
  components: {
    BaseMap
  },
  data() {
    return {
      years: '',
      value2: '',
      Birds: '',
      sum: '',
      areaId: "",
      manageSite: "",
      salvProName: "",
      salvProValue: "",
      salvProMax: [],
      tableData: [],
    };
  },
  mounted() {
    let vm = this;
    async function init() {
      await vm.$refs.baseMap.getcenter();
      // await vm.$refs.baseMap.getFowl();
      // await vm.$refs.baseMap.getPersonnel();
      // vm.getdataall();
    }
    init();
  },
  created() {
    this.areaId = window.sessionStorage.getItem("areaId");
    this.years = new Date().getFullYear();
    this.manageSite = sessionStorage.getItem('manageSite');
    this.getLiveness()
    this.getTotal()
    this.getICUN()
    this.getProtection()
    this.getTopten()
    this.getMigrate()
  },
  methods: {
    // 获取时间
    getYear(val) {
      if (val == null) {
        this.years = new Date().getFullYear();
      } else {
        this.years = val.getFullYear() + "";
      }
      this.getLiveness()
      this.getTotal()
      this.getICUN()
      this.getProtection()
      this.getTopten()
      this.getMigrate()
    },
    // 累计事件
    async getTotal() {
      let res = await http.get(api.getYearAnimalApi, {
        paramYear: this.years
      })
      this.Birds = res.data.data.species
      this.sum = res.data.data.notices
    },
    // 不能选择未来时间
    pickerOptions(time) {
      return new Date().getFullYear() < time.getFullYear();
    },
    // 各月份物种活跃度
    async getLiveness() {
      let res = await http.get(api.getMonthAnimalActiveApi, {
        paramYear: this.years
      })
      if (res.data.code == 200) {
        let arr = res.data.data.months
        let X = arr.map(item => item + '月')
        let Y = res.data.data.notices
        this.drawbar1(X, Y)
      }
    },
    drawbar1(x, y) {
      let myChart = echarts.getInstanceByDom(document.getElementById("chart1"));
      if (myChart == null) {
        myChart = echarts.init(document.getElementById("chart1"));
      }
      let option = {
        grid: {
          top: '15%',
          right: "3%",
          left: 0,
          bottom: "8%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            label: {
              backgroundColor: "#6a7985",
            },
          },
          formatter: function (params) {
            // 自定义显示内容
            // params 是一个包含当前数据信息的数组
            let result = params[0].name + "点" + "<br/>";
            params.forEach(function (item) {
              result += item.marker + item.value + "只/次";
            });
            return result;
          },
        },
        title: {
          text: "(单位:只/次)",
          textStyle: {
            color: "rgba(255, 255, 255, 0.80)",
            fontSize: ".12rem",
          },
        },
        xAxis: {
          data: x,
          type: "category",
          axisTick: {
            show: false,
            alignWithLabel: false,
          },
          axisLabel: {
            textStyle: {
              show: false,
              fontFamily: "PingFang",
              // color: '#5DCFF6',
              color: "rgba(255, 255, 255, 0.80)",
              fontSize: ".12rem",
            },
            // rotate: "45",
            interval: 0,
          },
        },
        yAxis: {
          type: "value",
          splitLine: {
            show: false,
            lineStyle: {
              color: "rgba(255, 255, 255, 0.80)",
            },
          },
          axisLine: {
            show: true, //不显示坐标轴线
          },
          axisLabel: {
            textStyle: {
              fontFamily: "PingFang",
              // color: '#5DCFF6',
              color: "rgba(255, 255, 255, 0.80)",
              fontSize: ".12rem",
            },
          },
        },
        series: [
          {
            data: y,
            name: "",
            type: "line",
            symbol: "none",
            symbol: "circle",
            smooth: true,
            symbolSize: 10,
            lineStyle: {
              width: 1,
              type: "solid",
            },
            itemStyle: {
              borderWidth: 2,
              borderColor: "#fff",
              color: "#0879FF",
            },
            areaStyle: {
              color: "#fff",
              //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    // color: 'RGBA(184, 204, 241, 1)'
                    color: "#0879FF",
                  },
                  //   {
                  //     offset: 0.5,
                  //     // color: 'RGBA(184, 204, 241, 0.5)'
                  //     color: "#0879FF",
                  //   },
                  {
                    offset: 1,
                    color: "#0D152F",
                    // color: '#283D46'
                  },
                ],
                false
              ),
              shadowBlur: 0, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
            },
          },
        ],
        dataZoom: [

          {
            //添加dataZoom属性即可显示滑动条S
            orient: "horizontal",
            show: true, //控制滚动条显示隐藏
            realtime: true, //拖动滚动条时是否动态的更新图表数据
            handleSize: 0,
            height: "3%", //滚动条高度
            start: 0, //滚动条开始位置（共6等份）
            end: 60, //滚动条结束位置
            top: "94%",
            // bottom: '20%',
            left: "9%", //滚动条靠左侧的百分比
            zoomLock: false, //控制面板是否进行缩放
            startValue: 0, // 从头开始。
            endValue: 5, // 一次性展示6个
            showDetail: false, // 关闭滚动条提示
            // backgroundColor: "rgb(63, 116, 168 , 0.5)",
            backgroundColor: "#0d5156",
            // fillerColor: "rgba(255, 255, 255,0.5)",
            fillerColor: "#2EFFF2",
            borderColor: '#ffca38',
            zoomLock: true,
            zoomOnMouseWheel: false,
            brushSelect: false,
            showDetail: false,
            showDataShadow: false,
          },
        ],
      }
      myChart.setOption(option);
      setTimeout(function () {
        myChart.resize();
      }, 100);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    // ICUN名录统计
    async getICUN() {
      let res = await http.get(api.getAnimalIucnApi, {
        areaId: this.areaId,
        paramYear: this.years,
        manageSites: this.manageSite,
      })
      if (res.data.code == 200) {
        let data = res.data.data
        let X = data.map(item => item.speciesLevel)
        let Y = data.map(item => item.speciesNumber)
        this.drawbar2(X, Y)
      }
    },
    drawbar2(x, y) {
      let myChart = echarts.getInstanceByDom(document.getElementById("chart2"));
      if (myChart == null) {
        myChart = echarts.init(document.getElementById("chart2"));
      }
      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            label: {
              backgroundColor: "#6a7985",
            },
          },
          formatter: function (params) {
            // 自定义显示内容
            // params 是一个包含当前数据信息的数组
            let result = params[0].name + "<br/>";
            params.forEach(function (item) {
              result += item.marker + item.value + "只/次";
            });
            return result;
          },
        },
        title: {
          text: "(单位:只/次)",
          textStyle: {
            color: "rgba(255, 255, 255, 0.80)",
            fontSize: ".12rem",
          },
        },
        xAxis: {
          axisTick: {
            show: false,
            alignWithLabel: false,
          },
          type: "category",
          boundaryGap: false,
          axisLabel: {
            color: "#fff",
          },
          axisLine: {
            show: true, //不显示坐标轴线
          },
          data: x,
        },
        yAxis: {
          type: "value",
          axisLabel: {
            color: "#fff",
          },
          splitLine: {
            lineStyle: {
              color: "rgba(255, 255, 255, 0.1)",
            },
          },
        },
        grid: {
          top: "15%",
          left: "10%",
          bottom: "10%",
          right: "8%",
        },
        series: [
          {
            data: y,
            type: "line",
            lineStyle: {
              color: "rgba(255, 233, 36, 0.7)",
            },
            itemStyle: {
              color: "#FFF27F",
            },
            symbolSize: 10,
          },
        ],
      };
      myChart.setOption(option);
      setTimeout(function () {
        myChart.resize();
      }, 100);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    // 活动频率
    async getProtection() {
      let res = await http.get(api.getAnimalLevelApi, {
        areaId: this.areaId,
        paramYear: this.years,
        manageSites: this.manageSite,
      })
      let arr = res.data.data
      let X = arr.map(item => item.speciesNumber);
      let Y = arr.map(item => item.speciesLevel);
      this.drawbar3(X, Y)
    },
    drawbar3(x, y) {
      let myChart = echarts.getInstanceByDom(document.getElementById("chart3"));
      if (myChart == null) {
        myChart = echarts.init(document.getElementById("chart3"));
      }
      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            label: {
              backgroundColor: "#6a7985",
            },
          },
          formatter: function (params) {
            // 自定义显示内容
            // params 是一个包含当前数据信息的数组
            let result = params[0].name + "<br/>";
            params.forEach(function (item) {
              result += item.marker + item.value + "只/次";
            });
            return result;
          },
        },
        title: {
          text: "(单位:只/次)",
          textStyle: {
            color: "rgba(255, 255, 255, 0.80)",
            fontSize: ".12rem",
          },
        },
        xAxis: {
          axisTick: {
            show: false,
            alignWithLabel: false,
          },
          type: "category",
          axisLabel: {
            textStyle: {
              color: "#fff",
            },
          },
          axisLine: {
            show: true, //不显示坐标轴线
          },
          data: y,
        },
        yAxis: {
          type: "value",
          // interval: 2, // y轴的刻度间隔
          axisLabel: {
            formatter: '{value}',
            textStyle: {
              color: "#fff",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(255, 255, 255, 0.1)",
            },
          },
        },
        grid: {
          top: "18%",
          left: "10%",
          right: "1%",
          bottom: "15%",
        },
        series: [
          {
            data: x,
            type: "bar",
            showBackground: true,
            label: {
              show: true,
              position: "top",
              color: "#fff",
            },
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: "rgba(46, 255, 242, .1)",
                  },
                  {
                    offset: 1,
                    color: "rgba(46, 255, 242, 1)",
                  },
                ]),
              },
            },
            backgroundStyle: {
              color: "rgba(255, 255, 255, 1)",
              opacity: 0.1,
            },
          },
        ],
      };
      myChart.setOption(option);
      setTimeout(function () {
        myChart.resize();
      }, 100);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    // top10
    async getTopten() {
      let res = await http.get(api.getYearAnimalTopApi, {
        paramYear: this.years,
      })
      let arr = res.data.data;
      this.salvProName = arr.map((item) => item.speciesName);
      this.salvProValue = arr.map((item) => item.speciesNumber);
      for (let i = 0; i < this.salvProValue.length; i++) {
        this.salvProMax.push(this.salvProValue[0]);
      }
      this.drawbar4(this.salvProName, this.salvProValue, this.salvProMax)
    },
    drawbar4(name, value, max) {
      let myChart = echarts.getInstanceByDom(document.getElementById("chart4"));
      if (myChart == null) {
        myChart = echarts.init(document.getElementById("chart4"));
      }
      let option = {
        grid: {
          left: "5%",
          right: "5%",
          bottom: "2%",
          top: "2%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "none",
          },
          formatter: function (params) {
            return params[0].name + " : " + params[0].value + '只/次';
          },
        },
        xAxis: {
          show: false,
          type: "value",
        },
        yAxis: [
          {
            type: "category",
            inverse: true,
            axisLabel: {
              show: true,
              color: "#fff",
              // fontSize: '0.14rem'
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            data: name,
          },
          {
            type: "category",
            inverse: true,
            axisTick: "none",
            axisLine: "none",
            show: true,
            axisLabel: {
              color: "#ffffff",
              // fontSize: '0.14rem'
            },
            data: value,
          },
        ],
        series: [
          {
            name: "值",
            type: "bar",
            // barWidth: 8,
            zlevel: 1,
            itemStyle: {
              borderRadius: 30,
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: "rgba(142,66,255,0)",
                },
                {
                  offset: 1,
                  color: "rgba(142,66,255,1)",
                },
              ]),
            },
            barWidth: 8,
            data: value,
            // barGap:'20%',
            // barCategoryGap:'-30%'
          },
          {
            name: "背景",
            type: "bar",
            barWidth: 8,
            barGap: "-100%",
            data: max,
            itemStyle: {
              color: "rgba(67,181,246,0.3)",
              borderRadius: 30,
            },
          },
        ],
      };
      myChart.setOption(option);
      setTimeout(function () {
        myChart.resize();
      }, 100);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    // 重点鸟类迁徙规律
    async getMigrate() {
      let res = await http.get(api.getMigrationApi, {
        paramYear: this.years,
      })
      if (res.data.code == 200) {
        this.tableData = res.data.data
      }
    }
  },
};
</script>

<style scoped>
@import "../../static/css/jbxx.css";
@import "../../static/css/xxjc.css";
@import "../../static/css/Statistics.css";
</style>
<style>
.el-input__prefix,
.el-input__suffix {
  height: .3rem;
}

.el-input__icon {
  line-height: .3rem;
}

.el-date-editor.el-input {
    width: 2.08rem ;
  }
.el-input__inner {
  background-color: transparent;
  color: #fff;
  height: .3rem;
  width: 2.08rem ;
  border-color: rgba(102, 225, 252, 0.5);
  ;
}
.el-picker-panel{
  background-color: #062730;
  color: #fff;
}
.el-date-picker__header-label{
  color: #fff;
}
.el-year-table td .cell{
  color: #fff;
}
</style>